<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>布匹销售系统前端需求文档</title>
    <style>
      body {
        font-family: "Microsoft YaHei", Arial, sans-serif;
        line-height: 1.6;
        color: #606266;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }
      .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }
      .nav-bar {
        background-color: #2d3446;
        padding: 10px 20px;
        border-radius: 4px;
        color: #c0c4cc;
      }
      .page-section {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
      }
      .color-block {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 5px;
        vertical-align: middle;
      }
      .table th {
        background-color: #f5f7fa;
        color: #606266;
        font-weight: normal;
      }
    </style>
  </head>
  <body>
    <div class="nav-container">
      <div class="nav-bar">
        <h1 style="color: #ffffff">布匹销售系统需求文档</h1>
      </div>
    </div>

    <!-- 页面结构 -->
    <div class="page-section">
      <h2>导航栏与页面结构</h2>
      <div style="display: flex; gap: 20px">
        <div style="flex: 1">
          <h3>顶部导航栏（固定）</h3>
          <ul>
            <li style="color: #c0c4cc">企业Logo（左上角）</li>
            <li style="color: #c0c4cc">用户头像/退出登录（右上角）</li>
            <li style="color: #c0c4cc">响应式折叠菜单（移动端显示）</li>
          </ul>
        </div>
        <div style="flex: 1">
          <h3>侧边导航栏（固定）</h3>
          <ul style="list-style-type: none; padding: 0">
            <li style="margin-bottom: 10px">
              <span style="color: #409eff">首页</span>
            </li>
            <li style="margin-bottom: 10px">
              <span style="color: #409eff">客户管理</span>
              <ul style="padding-left: 20px; margin-top: 5px">
                <li style="margin-bottom: 5px">客户列表</li>
                <li style="margin-bottom: 5px">客户画像分析</li>
                <li style="margin-bottom: 5px">客户流失预警</li>
              </ul>
            </li>
            <li style="margin-bottom: 10px">
              <span style="color: #409eff">订单管理</span>
              <ul style="padding-left: 20px; margin-top: 5px">
                <li style="margin-bottom: 5px">订单跟踪</li>
                <li style="margin-bottom: 5px">订单统计</li>
                <li style="margin-bottom: 5px">逾期预警</li>
              </ul>
            </li>
            <li style="margin-bottom: 10px">
              <span style="color: #409eff">数据分析</span>
              <ul style="padding-left: 20px; margin-top: 5px">
                <li style="margin-bottom: 5px">销售趋势</li>
                <li style="margin-bottom: 5px">客户分布热力图</li>
                <li style="margin-bottom: 5px">布匹参数对比</li>
              </ul>
            </li>
            <li style="margin-bottom: 10px">
              <span style="color: #409eff">系统设置</span>
              <ul style="padding-left: 20px; margin-top: 5px">
                <li style="margin-bottom: 5px">用户权限管理</li>
                <li style="margin-bottom: 5px">数据看板配置</li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 核心页面示例 -->
    <div class="page-section">
      <h2>核心页面功能与UI设计</h2>
      <div class="page-card">
        <h3>首页</h3>
        <p>数据概览、实时看板、快捷操作</p>
        <div style="display: flex; gap: 10px; margin-top: 10px">
          <div class="color-block" style="background-color: #f0f2f5"></div>
          <span>背景色：#F0F2F5</span>
        </div>
        <div style="display: flex; gap: 10px; margin-top: 5px">
          <div class="color-block" style="background-color: #409eff"></div>
          <span>主按钮颜色：#409EFF</span>
        </div>
      </div>

      <div class="page-card" style="margin-top: 20px">
        <h3>客户列表</h3>
        <p>表格展示、条件筛选、批量操作</p>
        <div style="display: flex; gap: 10px; margin-top: 10px">
          <div class="color-block" style="background-color: #ffffff"></div>
          <span>表格行背景：#FFFFFF</span>
        </div>
        <div style="display: flex; gap: 10px; margin-top: 5px">
          <div class="color-block" style="background-color: #dcdfe6"></div>
          <span>输入框边框：#DCDFE6</span>
        </div>
      </div>

      <!-- 其他页面类似结构 -->
    </div>

    <!-- UI组件库定制 -->
    <div class="page-section">
      <h2>UI组件库定制方案</h2>
      <h3>主题变量修改</h3>
      <table>
        <tr>
          <th>变量名</th>
          <th>原值</th>
          <th>新值</th>
          <th>说明</th>
        </tr>
        <tr>
          <td>$--color-primary</td>
          <td>#409EFF</td>
          <td>#409EFF</td>
          <td>保持主色调不变</td>
        </tr>
        <tr>
          <td>$--border-color-base</td>
          <td>#DCDFE6</td>
          <td>#DCDFE6</td>
          <td>统一边框颜色</td>
        </tr>
        <!-- 更多变量修改... -->
      </table>
    </div>

    <!-- 视觉效果预览 -->
    <div class="page-section">
      <h2>视觉效果预览</h2>
      <div style="display: flex; gap: 20px; margin-top: 10px">
        <div
          style="width: 200px; height: 150px; background-color: #f0f2f5"
        ></div>
        <div
          style="width: 200px; height: 150px; background-color: #409eff"
        ></div>
        <div
          style="width: 200px; height: 150px; background-color: #f56c6c"
        ></div>
      </div>
      <p>示例颜色块：</p>
      <ul>
        <li style="color: #606266">浅灰色 (#F0F2F5) - 页面背景</li>
        <li style="color: #409eff">主蓝色 (#409EFF) - 按钮/链接</li>
        <li style="color: #f56c6c">危险色 (#F56C6C) - 错误提示</li>
      </ul>
    </div>

    <!-- 技术注意事项 -->
    <div class="page-section">
      <h2>技术实现注意事项</h2>
      
      <h3>1. 布局架构设计</h3>
      <h4>1.1 顶部导航栏实现</h4>
      <ul>
        <li><strong>固定定位：</strong>使用 position: fixed; top: 0; left: 0; right: 0; z-index: 1000;</li>
        <li><strong>高度设置：</strong>固定高度 60px，内容垂直居中 align-items: center;</li>
        <li><strong>Logo区域：</strong>左侧 padding-left: 20px，Logo尺寸 40px × 40px，支持SVG格式</li>
        <li><strong>用户区域：</strong>右侧 padding-right: 20px，头像圆形 32px × 32px，下拉菜单使用 el-dropdown</li>
        <li><strong>响应式处理：</strong>屏幕宽度 < 768px 时显示汉堡菜单，使用 el-drawer 组件</li>
      </ul>
      
      <h4>1.2 侧边导航栏实现</h4>
      <ul>
        <li><strong>固定定位：</strong>position: fixed; top: 60px; left: 0; bottom: 0; width: 240px;</li>
        <li><strong>滚动处理：</strong>overflow-y: auto; 自定义滚动条样式，宽度 6px，圆角 3px</li>
        <li><strong>菜单组件：</strong>使用 el-menu，设置 default-active 当前路由，collapse 属性控制折叠</li>
        <li><strong>子菜单样式：</strong>el-submenu 背景色 #f5f7fa，展开动画 transition: all 0.3s ease</li>
        <li><strong>图标配置：</strong>每个菜单项配置 Element Plus 图标，尺寸 16px，颜色 #606266</li>
      </ul>
      
      <h4>1.3 主内容区域</h4>
      <ul>
        <li><strong>位置计算：</strong>margin-top: 60px; margin-left: 240px; padding: 20px;</li>
        <li><strong>响应式适配：</strong>移动端时 margin-left: 0，通过 drawer 显示侧边栏</li>
        <li><strong>最小高度：</strong>min-height: calc(100vh - 60px) 确保内容区域填满屏幕</li>
      </ul>
      
      <h3>2. 响应式设计细节</h3>
      <h4>2.1 断点设置</h4>
      <ul>
        <li><strong>桌面端：</strong>≥ 1200px，侧边栏展开，显示完整菜单文字</li>
        <li><strong>平板端：</strong>768px - 1199px，侧边栏折叠，只显示图标</li>
        <li><strong>移动端：</strong>< 768px，侧边栏隐藏，通过 drawer 弹出</li>
      </ul>
      
      <h4>2.2 CSS媒体查询</h4>
      <pre style="background: #f5f7fa; padding: 10px; border-radius: 4px; font-size: 12px;">@media (max-width: 1199px) {
  .sidebar { width: 64px; }
  .main-content { margin-left: 64px; }
}
@media (max-width: 767px) {
  .sidebar { transform: translateX(-100%); }
  .main-content { margin-left: 0; }
}</pre>
      
      <h3>3. 性能优化策略</h3>
      <h4>3.1 表格虚拟滚动</h4>
      <ul>
        <li><strong>组件选择：</strong>使用 el-table-v2 或 el-virtual-list</li>
        <li><strong>参数配置：</strong>item-height: 50px, buffer-size: 10, cache-size: 100</li>
        <li><strong>数据分页：</strong>每页最多 100 条记录，超出使用虚拟滚动</li>
        <li><strong>列宽优化：</strong>固定列宽避免重新计算，使用 table-layout: fixed</li>
      </ul>
      
      <h4>3.2 图片懒加载</h4>
      <ul>
        <li><strong>实现方式：</strong>使用 Intersection Observer API</li>
        <li><strong>占位图：</strong>1px × 1px 透明 base64 图片</li>
        <li><strong>加载策略：</strong>距离视口 100px 时开始加载</li>
        <li><strong>错误处理：</strong>加载失败显示默认图片，重试机制 3 次</li>
      </ul>
      
      <h4>3.3 路由懒加载</h4>
      <ul>
        <li><strong>代码分割：</strong>每个页面单独打包，使用 import() 动态导入</li>
        <li><strong>预加载策略：</strong>鼠标悬停菜单项时预加载对应组件</li>
        <li><strong>缓存策略：</strong>使用 keep-alive 缓存频繁访问的页面</li>
      </ul>
      
      <h3>4. 交互细节实现</h3>
      <h4>4.1 表单校验</h4>
      <ul>
        <li><strong>实时校验：</strong>input 事件触发，debounce 延迟 300ms</li>
        <li><strong>错误样式：</strong>边框颜色 #F56C6C，背景色 #FEF0F0，图标 el-icon-warning</li>
        <li><strong>成功样式：</strong>边框颜色 #67C23A，背景色 #F0F9FF，图标 el-icon-success</li>
        <li><strong>提示位置：</strong>错误信息显示在输入框下方，字体大小 12px，颜色 #F56C6C</li>
      </ul>
      
      <h4>4.2 加载状态</h4>
      <ul>
        <li><strong>按钮加载：</strong>使用 el-button loading 属性，禁用点击事件</li>
        <li><strong>页面加载：</strong>全屏 loading，使用 el-loading 指令</li>
        <li><strong>表格加载：</strong>骨架屏效果，显示 10 行占位内容</li>
        <li><strong>超时处理：</strong>请求超过 30 秒显示超时提示，提供重试按钮</li>
      </ul>
      
      <h4>4.3 消息提示</h4>
      <ul>
        <li><strong>成功提示：</strong>el-message.success，持续时间 3 秒，绿色图标</li>
        <li><strong>错误提示：</strong>el-message.error，持续时间 5 秒，红色图标，可手动关闭</li>
        <li><strong>警告提示：</strong>el-message.warning，持续时间 4 秒，橙色图标</li>
        <li><strong>确认对话框：</strong>el-message-box.confirm，自定义按钮文字和颜色</li>
      </ul>
      
      <h3>5. 数据可视化实现</h3>
      <h4>5.1 图表组件</h4>
      <ul>
        <li><strong>图表库：</strong>使用 ECharts 5.x 版本，按需引入减少包体积</li>
        <li><strong>响应式：</strong>监听窗口 resize 事件，调用 chart.resize()</li>
        <li><strong>主题配置：</strong>自定义主题色彩，与系统 UI 保持一致</li>
        <li><strong>动画效果：</strong>数据更新使用 setOption 的 notMerge: false</li>
      </ul>
      
      <h4>5.2 热力图实现</h4>
      <ul>
        <li><strong>地图数据：</strong>使用高德地图 API，精确到市级行政区划</li>
        <li><strong>数据映射：</strong>客户数量映射到颜色深度，使用 HSL 色彩空间</li>
        <li><strong>交互功能：</strong>鼠标悬停显示详细信息，点击跳转到客户列表</li>
        <li><strong>性能优化：</strong>使用 Canvas 渲染，数据量大时启用聚合显示</li>
      </ul>
      
      <h3>6. 安全性考虑</h3>
      <h4>6.1 权限控制</h4>
      <ul>
        <li><strong>路由守卫：</strong>beforeEach 检查 token 有效性和页面权限</li>
        <li><strong>菜单过滤：</strong>根据用户角色动态生成菜单，隐藏无权限项</li>
        <li><strong>按钮权限：</strong>使用自定义指令 v-permission 控制按钮显示</li>
        <li><strong>接口权限：</strong>每个请求携带 Authorization header，后端验证</li>
      </ul>
      
      <h4>6.2 数据安全</h4>
      <ul>
        <li><strong>XSS防护：</strong>使用 DOMPurify 过滤用户输入，v-html 谨慎使用</li>
        <li><strong>CSRF防护：</strong>请求头添加 X-Requested-With: XMLHttpRequest</li>
        <li><strong>敏感数据：</strong>客户手机号、身份证号等脱敏显示</li>
        <li><strong>日志记录：</strong>记录用户操作日志，包含时间、IP、操作内容</li>
      </ul>
      
      <h3>7. 浏览器兼容性</h3>
      <h4>7.1 支持范围</h4>
      <ul>
        <li><strong>现代浏览器：</strong>Chrome 80+, Firefox 75+, Safari 13+, Edge 80+</li>
        <li><strong>IE兼容：</strong>不支持 IE，显示升级提示页面</li>
        <li><strong>移动端：</strong>iOS Safari 13+, Android Chrome 80+</li>
      </ul>
      
      <h4>7.2 Polyfill配置</h4>
      <ul>
        <li><strong>ES6+特性：</strong>使用 @babel/preset-env 自动添加 polyfill</li>
        <li><strong>CSS特性：</strong>使用 autoprefixer 自动添加浏览器前缀</li>
        <li><strong>API兼容：</strong>fetch、Promise、IntersectionObserver 等 API 的 polyfill</li>
      </ul>
      
      <h3>8. 部署和监控</h3>
      <h4>8.1 构建优化</h4>
      <ul>
        <li><strong>代码压缩：</strong>使用 terser 压缩 JS，cssnano 压缩 CSS</li>
        <li><strong>资源优化：</strong>图片使用 WebP 格式，启用 Gzip 压缩</li>
        <li><strong>缓存策略：</strong>静态资源添加版本号，设置长期缓存</li>
        <li><strong>CDN配置：</strong>静态资源使用 CDN 加速，多节点部署</li>
      </ul>
      
      <h4>8.2 错误监控</h4>
       <ul>
         <li><strong>错误收集：</strong>使用 Sentry 收集前端错误和性能数据</li>
         <li><strong>用户行为：</strong>埋点统计用户操作路径和停留时间</li>
         <li><strong>性能监控：</strong>监控首屏加载时间、接口响应时间</li>
         <li><strong>告警机制：</strong>错误率超过阈值时自动发送告警通知</li>
       </ul>
       
       <h3>9. 技术亮点与创新实现</h3>
       
       <h4>9.1 三维可视化交互（系统核心）</h4>
       <h5>9.1.1 技术架构选型</h5>
       <ul>
         <li><strong>渲染引擎：</strong>Three.js + WebGL 2.0，支持现代浏览器硬件加速</li>
         <li><strong>物理引擎：</strong>集成 Cannon.js 实现布料物理模拟和碰撞检测</li>
         <li><strong>材质系统：</strong>基于 PBR（物理渲染）材质，支持金属度、粗糙度、法线贴图</li>
         <li><strong>光照系统：</strong>环境光 + 方向光 + 点光源组合，实现真实光照效果</li>
         <li><strong>后处理：</strong>FXAA抗锯齿、SSAO环境光遮蔽、Bloom辉光效果</li>
       </ul>
       
       <h5>9.1.2 布匹模型构建</h5>
       <ul>
         <li><strong>几何体生成：</strong>使用 PlaneGeometry 创建基础平面，细分度可调（默认 64x64）</li>
         <li><strong>顶点着色器：</strong>实现布料褶皱、纹理映射、法线扰动</li>
         <li><strong>片元着色器：</strong>处理材质反射、透明度、次表面散射效果</li>
         <li><strong>纹理系统：</strong>支持漫反射贴图、法线贴图、粗糙度贴图、金属度贴图</li>
         <li><strong>UV映射：</strong>自动计算纹理坐标，支持纹理重复和偏移调整</li>
       </ul>
       
       <h5>9.1.3 动态参数化调整</h5>
       <ul>
         <li><strong>拉伸变形：</strong>通过修改顶点位置实现长度、宽度实时调整</li>
         <li><strong>旋转控制：</strong>使用四元数（Quaternion）实现平滑旋转，避免万向锁</li>
         <li><strong>缩放变换：</strong>支持非等比缩放，保持纹理比例正确</li>
         <li><strong>物理约束：</strong>设置最大拉伸比例（1.5倍），防止模型失真</li>
         <li><strong>动画插值：</strong>使用 Tween.js 实现参数变化的平滑过渡</li>
       </ul>
       
       <h5>9.1.4 实时渲染优化</h5>
       <ul>
         <li><strong>LOD系统：</strong>根据相机距离动态调整模型细节级别</li>
         <li><strong>视锥剔除：</strong>只渲染视野范围内的对象，提升性能</li>
         <li><strong>实例化渲染：</strong>批量渲染相同布料样本，减少 Draw Call</li>
         <li><strong>纹理压缩：</strong>使用 DXT/ETC 格式压缩纹理，减少显存占用</li>
         <li><strong>帧率控制：</strong>目标 60FPS，低端设备自动降级到 30FPS</li>
       </ul>
       
       <h5>9.1.5 光照效果实现</h5>
       <ul>
         <li><strong>环境光：</strong>使用 HDR 环境贴图，提供真实的环境反射</li>
         <li><strong>主光源：</strong>可调节的方向光，模拟太阳光或室内照明</li>
         <li><strong>辅助光源：</strong>多个点光源模拟展厅灯光效果</li>
         <li><strong>阴影系统：</strong>PCF 软阴影，阴影贴图分辨率 2048x2048</li>
         <li><strong>色温调节：</strong>支持 2700K-6500K 色温范围，模拟不同光源</li>
       </ul>
       
       <h5>9.1.6 交互控制系统</h5>
       <ul>
         <li><strong>轨道控制：</strong>鼠标拖拽旋转、滚轮缩放、右键平移</li>
         <li><strong>触摸支持：</strong>移动端手势识别，单指旋转、双指缩放</li>
         <li><strong>键盘快捷键：</strong>WASD 移动、QE 上下、R 重置视角</li>
         <li><strong>预设视角：</strong>正面、侧面、俯视、透视四个预设角度</li>
         <li><strong>自动旋转：</strong>可开启自动旋转展示，速度可调</li>
       </ul>
       
       <h5>9.1.7 质感对比功能</h5>
       <ul>
         <li><strong>分屏对比：</strong>支持 2-4 个布料样本同时展示</li>
         <li><strong>参数同步：</strong>光照、视角参数在多个视口间同步</li>
         <li><strong>差异高亮：</strong>自动标注材质参数差异较大的区域</li>
         <li><strong>切换动画：</strong>布料切换时的淡入淡出过渡效果</li>
         <li><strong>参数面板：</strong>实时显示当前布料的物理参数对比</li>
       </ul>
       
       <h5>9.1.8 性能监控与优化</h5>
       <ul>
         <li><strong>FPS 监控：</strong>实时显示帧率，低于 30FPS 时自动优化</li>
         <li><strong>内存管理：</strong>及时释放不用的纹理和几何体，防止内存泄漏</li>
         <li><strong>渲染统计：</strong>显示三角形数量、Draw Call 次数</li>
         <li><strong>设备检测：</strong>根据 GPU 性能自动调整渲染质量</li>
         <li><strong>降级策略：</strong>低端设备禁用后处理效果，使用简化材质</li>
       </ul>
       
       <h4>9.2 高性能数据渲染</h4>
       <h5>9.2.1 虚拟滚动增强</h5>
       <ul>
         <li><strong>算法优化：</strong>使用二分查找快速定位可见区域，时间复杂度 O(log n)</li>
         <li><strong>缓存策略：</strong>LRU 缓存机制，缓存最近访问的 1000 行数据</li>
         <li><strong>预渲染：</strong>提前渲染视口外 50 行数据，减少滚动白屏</li>
         <li><strong>动态高度：</strong>支持行高不固定的复杂表格布局</li>
         <li><strong>横向虚拟化：</strong>列数超过 50 列时启用横向虚拟滚动</li>
       </ul>
       
       <h5>9.2.2 Web Worker 数据处理</h5>
       <ul>
         <li><strong>数据分片：</strong>大数据集按 10000 条记录分片处理</li>
         <li><strong>并行计算：</strong>多个 Worker 并行处理不同数据片段</li>
         <li><strong>增量更新：</strong>只处理变更的数据，避免全量重新计算</li>
         <li><strong>压缩传输：</strong>使用 MessagePack 压缩 Worker 间数据传输</li>
         <li><strong>错误恢复：</strong>Worker 异常时自动重启，保证数据处理连续性</li>
       </ul>
       
       <h5>9.2.3 渲染性能优化</h5>
       <ul>
         <li><strong>批量更新：</strong>使用 requestAnimationFrame 批量更新 DOM</li>
         <li><strong>CSS 优化：</strong>使用 transform3d 开启硬件加速</li>
         <li><strong>事件委托：</strong>表格事件统一委托到容器元素</li>
         <li><strong>防抖节流：</strong>滚动事件 16ms 节流，搜索输入 300ms 防抖</li>
         <li><strong>内存回收：</strong>定期清理不可见行的 DOM 节点</li>
       </ul>
       
       <h4>9.3 沉浸式参数配置</h4>
       <h5>9.3.1 联动调节面板</h5>
       <ul>
         <li><strong>参数分组：</strong>物理参数、外观参数、价格参数三大类</li>
         <li><strong>滑块控件：</strong>支持精确数值输入和拖拽调节</li>
         <li><strong>范围限制：</strong>每个参数设置合理的最小值和最大值</li>
         <li><strong>单位换算：</strong>支持公制/英制单位自动转换</li>
         <li><strong>预设方案：</strong>常用参数组合的快速应用</li>
       </ul>
       
       <h5>9.3.2 实时联动机制</h5>
       <ul>
         <li><strong>响应式更新：</strong>使用 Vue 3 Composition API 实现参数响应式</li>
         <li><strong>计算属性：</strong>价格、重量等衍生参数自动计算</li>
         <li><strong>防抖处理：</strong>参数变化 100ms 内合并更新请求</li>
         <li><strong>回调队列：</strong>按优先级执行模型更新、价格计算、UI 刷新</li>
         <li><strong>状态同步：</strong>多个组件间的参数状态实时同步</li>
       </ul>
       
       <h5>9.3.3 价格计算引擎</h5>
       <ul>
         <li><strong>公式引擎：</strong>支持复杂的价格计算公式：总价 = 克重 × 幅宽 × 长度 × 单价系数 × 工艺加成</li>
         <li><strong>阶梯定价：</strong>根据数量区间应用不同的价格系数</li>
         <li><strong>动态折扣：</strong>VIP 客户、批量采购等折扣规则</li>
         <li><strong>汇率转换：</strong>支持多币种实时汇率转换</li>
         <li><strong>税费计算：</strong>自动计算增值税、运费等附加费用</li>
       </ul>
       
       <h4>9.4 低代码可视化看板</h4>
       <h5>9.4.1 拖拽式配置</h5>
       <ul>
         <li><strong>组件库：</strong>提供 20+ 种 ECharts 图表组件</li>
         <li><strong>拖拽引擎：</strong>基于 Vue Draggable 实现组件拖拽</li>
         <li><strong>网格布局：</strong>12 列栅格系统，支持响应式布局</li>
         <li><strong>尺寸调节：</strong>拖拽边角调整组件大小</li>
         <li><strong>层级管理：</strong>支持组件层级调整和锁定</li>
       </ul>
       
       <h5>9.4.2 数据源配置</h5>
       <ul>
         <li><strong>API 接口：</strong>支持 RESTful API 和 GraphQL 数据源</li>
         <li><strong>SQL 查询：</strong>可视化 SQL 查询构建器</li>
         <li><strong>数据转换：</strong>内置数据清洗和格式转换函数</li>
         <li><strong>实时数据：</strong>WebSocket 连接支持实时数据更新</li>
         <li><strong>缓存策略：</strong>数据缓存和刷新策略配置</li>
       </ul>
       
       <h5>9.4.3 图表配置引擎</h5>
       <ul>
         <li><strong>配置面板：</strong>图形化配置图表样式、数据映射</li>
         <li><strong>主题系统：</strong>预设多种图表主题，支持自定义</li>
         <li><strong>交互配置：</strong>点击、悬停、缩放等交互行为设置</li>
         <li><strong>动画效果：</strong>图表加载和数据更新动画配置</li>
         <li><strong>导出功能：</strong>支持 PNG、SVG、PDF 格式导出</li>
       </ul>
       
       <h5>9.4.4 权限与协作</h5>
       <ul>
         <li><strong>权限控制：</strong>看板查看、编辑、分享权限管理</li>
         <li><strong>版本管理：</strong>看板配置的版本控制和回滚</li>
         <li><strong>协作编辑：</strong>多人同时编辑的冲突检测和合并</li>
         <li><strong>分享机制：</strong>生成分享链接，支持密码保护</li>
         <li><strong>嵌入代码：</strong>生成 iframe 嵌入代码，集成到其他系统</li>
       </ul>
     </div>
  </body>
</html>
